.login {
	position: relative;
	width: 100vw;
	height: 100%;
	background: #fff;
	z-index: 999;
	.login-banner {
		position: relative;
		width: 100%;
		height: 52vh;
		border-radius: 0 0 43px 43px;
		overflow: hidden;
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			display: block;
			width: 100%;
			height: 50%;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
		}
		img {
			width: 100%;
			height: 100%;
		}
	}
	.login-box {
		position: fixed;
		top: 18vh;
		left: 0;
		right: 0;
		margin: 0 26px;
		height: 290px;
		background: #fff;
		padding: 16px;
		box-sizing: border-box;
		box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
		border-radius: 20px;
		animation-duration: 0.8s;
		& > h3 {
			margin-top: 8px;
			padding-bottom: 10px;
			text-align: center;
			color: #717171;
		}
		._input-group {
			width: 100%;
			height: 46px;
			display: grid;
			grid-template-columns: 50px 1fr;
			grid-template-rows: 1fr;
			background: #fafafc;
			border-radius: 16px;
			overflow: hidden;
			margin: 20px 0;
			label {
				justify-self: center;
				align-self: center;
				color: #28c9e0;
				font-size: 1.125rem;
			}
			input[type='text'],
			input[type='password'] {
				display: block;
				border: none;
				outline: none;
				color: #717171;
				background: none;
				padding-right: 10px;
				box-sizing: border-box;
				font-size: 0.875rem;
			}
		}
		p {
			text-align: center;
			font-size: 0.75rem;
			text-decoration: underline;
			&:active {
				color: crimson;
			}
		}
		._btn-login {
			position: absolute;
			left: 0;
			right: 0;
			bottom: -30px;
			margin: 0 auto;
			width: 86%;
			height: 52px;
			border: none;
			background: linear-gradient(to right, #28c9e0, #1cd5c6);
			color: #fff;
			border-radius: 46px;
			letter-spacing: 4px;
			box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
			outline: none;
			font-size: 0.875rem;
			transition: all 0.2s;
			&:active {
				background: linear-gradient(to right, #2ce2fa, #1ff5e4);
			}
		}
	}
}
